<template>
  <view class="grid grid-cols-5 gap-2 justify-between shadow p-4 py-8 bg-white">
    <view class="col-span-5 flex flex-col justify-between self-stretch">
      <view>
        <text class="power-title">{{ device.name }}</text>
        <text class="power-location">{{ device.roomNumber }}</text>
      </view>
      <view class="flex items-center justify-center">
        <view>
          <image
            style="width: 108rpx; height: 108rpx;"
            src="/static/icons/icon-light.png"
          ></image>
        </view>
      </view>
      <view class="flex items-center justify-center status-text">
          <image
            v-if="device.properties.light !== 0"
            style="width: 48rpx; height: 48rpx;"
            src="/static/icons/on.png"
            class="w-full"
          >
          </image>
          <image
            v-else
            style="width: 48rpx; height: 48rpx;"
            src="/static/icons/off.png"
          ></image>
        </view>
        <view class="flex items-center justify-center">
          <text :class="['status-text', 'status_' + device.properties.light]">
            {{ device.properties.light | statusText }}
          </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    device: {
      type: Object,
      default: {},
    },
  },
  filters: {
    statusText(status) {
      return status !== 0 ? '开启中': '已关闭'
    },
  },
}
</script>

<style lang="scss" scoped>
.power-title {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  // color: rgba(23, 153, 249, 1);
  opacity: 1;
}
.power-text {
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(40, 42, 51, 1);
  opacity: 1;
  margin-left: 6rpx;
}
.power-unit {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 33px;
  color: rgba(128, 134, 149, 1);
  opacity: 1;
  margin-left: 6rpx;
}

.power-location {
  margin-left: 18rpx;
  color: #808695;
  width: 129rpx;
  height: 40rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 40px;
}

.status-text {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(0, 219, 144, 1);
  opacity: 1;
  margin-top: 12rpx;
}

.status_0 {
  color: #bdc7df;
}
</style>
